<template>
  <div class="home-page page">
    <h1>{{timeStatus}}好，<span>{{userInfo.name}}</span></h1>
    <h2>{{time}}</h2>
    <div class="operations">
      <a-card hoverable class="client" @click="goRouter('ClientIndex')">
        <a-icon type="solution" />
        客户
      </a-card>
      <a-card hoverable class="order" @click="goRouter('OrderIndex')">
        <a-icon type="ordered-list" />
        订单
      </a-card>
      <a-card hoverable class="delivery" @click="goRouter('DeliveryIndex')">
        <a-icon type="car" />
        送货单
      </a-card>
      <a-card hoverable class="summary" @click="goRouter('Summary')">
        <a-icon type="file-done" />
        月结
      </a-card>
    </div>
    <div class="version">版本：{{version}}</div>
  </div>
</template>

<script>
import {
  generateTime,
  generateTimeStatus
} from '@/utils/commonFunc.js';

export default {
  name: "HomePage",
  props: {

  },
  data() {
    return {
      userInfo: () => {
        return new Object();
      },
      time: generateTime(),
      timeStatus: generateTimeStatus(),
      version: this.$store.state.systemVersion
    };
  },
  computed: {
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
    setInterval(() => {
      this.time = generateTime();
      this.timeStatus = generateTimeStatus();
    }, 10000);
  },
  watch: {
    '$store.state.version' (to) {
      this.version = to;
    }
  },
  methods: {
    goRouter(name) {
      this.$router.push({
        name
      });
    }
  },
  components: {
  },
};
</script>

<style scoped lang="scss">
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-bottom: 150px !important;
  background: rgb(245, 247, 252);

  >h1 {
    font-weight: bold;
    font-size: 2em;
    span {
      color: rgb(154, 205, 50)
    }
  }

  >h2 {
    color: rgb(100, 149, 237)
  }

  >.operations {
    display: flex;
    >* {
      margin: 30px;
    }
    >.client {
      color: rgb(189, 186, 0)
    }
    >.order {
      color: rgb(57, 165, 255)
    }
    >.delivery {
      color: rgb(8, 191, 136)
    }
    >.summary {
      color: rgb(72, 69, 223)
    }
  }

  .version {
    position: absolute;
    bottom: 40px;
  }
}
</style>

<style lang="scss">
.home-page {
  .ant-card-body {
    width: 150px;
    height: 150px;
    font-size: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
